<template>
	<view>
		<canvas canvas-id="myCanvas" style="width: 690px;height:1040px; position: fixed;top: -10000px;"></canvas>
		<image @click="saveShareImg(canvasToTempFilePath)" style="width: 690upx; height: 1040upx;display: block;margin: 0 auto;" :src="canvasToTempFilePath"
		 mode=""></image>
		 <view class="login_btn" @tap="saveShareImg(canvasToTempFilePath)">保存图片</view>
	</view>
</template>

<script>
	const Page = require('../../utils/mtj-wx-sdk.js').Page;
	import { getCode } from '@/api/user.js'
	export default {
		onLoad(e) {
			
			this.info = decodeURIComponent(e.data)
			this.info = JSON.parse(this.info)
			console.log(this.info,555)
			getCode({
				path:'pages/detail/detail',
				user_id:Number(this.info.recruit_user_id),
				job_id:Number(this.info.recruit_job_id)
			}).then(res=>{
				let code  = res.data
				console.log(code,222)
				let src = `data:image/jpg;base64,${code}`;
				const fsm = wx.getFileSystemManager();  // 获取文件管理器
				code = code .replace(/\ +/g, ""); //去掉空格方法
				code = code .replace(/[\r\n]/g, "");
				
				const buffer = wx.base64ToArrayBuffer(code );  //  将 base64 字符串转成 ArrayBuffer 对象
				const fileName = wx.env.USER_DATA_PATH + '/share_img.png';  // 文件系统中的用户目录路径 （本地路径）
				/**
				* @param fileName: 文件路径
				* @param buffer : 要写入的文本或二进制数据
				* @param binary: 指定写入文件的字符编码
				*/
				fsm.writeFileSync(fileName, buffer, 'binary');  // 写入文件， 同步方法
				
				console.log(fileName);  // 写入成功后就可以访问到该图片路径了
				this.codeData = fileName
				this.createCanvasImage();
			})
		},
		data() {
			return {
				ratio: 1,
				ctx: null, // 创建canvas对象
				canvasToTempFilePath: null, // 保存最终生成的导出的图片地址
				openStatus: true ,// 声明一个全局变量判断是否授权保存到相册,
				tag:'有提成',
				info:'',
				codeData:''
			};
		},
		onShareAppMessage(res) {
			return {
				title: this.info.recruit_job_title,
				desc: "分享",
				type: 0,
				imageUrl: canvasToTempFilePath,
				success: res => {
					console.log(res)
				},
				fail: err => {
					console.log(err)
				}
		
			}
		},
		onShareTimeline(res) {
			let distSource = uni.getStorageSync('distSource');
			if (distSource) {
				return {
					title: this.info.recruit_job_title,
					desc: "分享",
					type: 1,
					imageUrl: canvasToTempFilePath,
					success: res => {
						console.log(res)
					},
					fail: err => {
						console.log(err)
					}
				}
			}
		},
		methods: {
			// 生成海报
			async createCanvasImage() {
				getCode({
					path:'pages/detail/detail',
					user_id:this.info.recruit_user_id,
					job_id:this.info.recruit_job_id
				}).then(res=>{
					this.codeData = `data:image/jpg;base64,${res.data}`
				})
				let self = this;
				// 点击生成海报数据埋点
				if (!self.ctx) {
					let codeUrl = self.codeData;
					// let coverUrl = 'https://api.jiapeijia.com/static/cover.jpg';
					// let headUrl = 'https://api.jiapeijia.com/uploads/1.png';
					wx.showLoading({
						title: '生成中...'
					});
					let code = new Promise(function(resolve) {
						wx.getImageInfo({
							src: codeUrl,
							success: function(res) {
								resolve(res.path);
							},
							fail: function(err) {
								console.log(err);
								wx.showToast({
									title: '网络错误请重试',
									icon: 'loading'
								});
							}
						});
					});

					// let cover = new Promise(function(resolve) {
					// 	wx.getImageInfo({
					// 		src: coverUrl,
					// 		success: function(res) {
					// 			resolve(res.path);
					// 		},
					// 		fail: function(err) {
					// 			console.log(err);
					// 			wx.showToast({
					// 				title: '网络错误请重试',
					// 				icon: 'loading'
					// 			});
					// 		}
					// 	});
					// });

					// // 头像
					// let headImg = new Promise(function(resolve) {
					// 	wx.getImageInfo({
					// 		src: headUrl,
					// 		success: function(res) {
					// 			resolve(res.path);
					// 		},
					// 		fail: function(err) {
					// 			console.log(err);
					// 			wx.showToast({
					// 				title: '网络错误请重试',
					// 				icon: 'loading'
					// 			});
					// 		}
					// 	});
					// });

					Promise.all([code]).then(function(result) {
						const ctx = wx.createCanvasContext('myCanvas');
						console.log(ctx, self.ratio, 'ctx');
						let canvasWidthPx = 690 * self.ratio,
							canvasHeightPx = 690 * self.ratio,

							// avatarurl_width = 110, //绘制的头像宽度
							// avatarurl_heigth = 110, //绘制的头像高度
							// avatarurl_x = 95, //绘制的头像在画布上的位置
							// avatarurl_y = 35, //绘制的头像在画布上的位置

							// codeurl_width = 160, //绘制的二维码宽度
							// codeurl_heigth = 160, //绘制的二维码高度
							// codeurl_x = 260, //绘制的二维码在画布上的位置
							// codeurl_y = 460, //绘制的二维码在画布上的位置

							codeurl_width = 160, //绘制的封面宽度
							codeurl_heigth = 160, //绘制的封面高度
							codeurl_x = 260, //绘制的封面在画布上的位置
							codeurl_y = 460; //绘制的封面在画布上的位置

						// ctx.drawImage('/static/img/poster/share.png', 0, 200, 690, 690); // 背景图片需要本地
						wx.getImageInfo({
						          src: 'https://static.cholink.com/recruit-staff/recruit-wx/banner1.png',
						          success:  res=> {
									  console.log(res,"xxxx",ctx)
									  ctx.drawImage(res.path, 0, 200, 690, 690);
								 					
									  // 白底
									  // ctx.setFillStyle('#ffffff')
									  // ctx.fillRect(25, 175, 640, 840)
									  
									  ctx.save(); // 先保存状态 已便于画完圆再用
									  // 				ctx.beginPath(); //开始绘制
									  // 				//先画个圆   前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针
									  // 				ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);
									  // 				ctx.clip(); //画了圆 再剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
									  // 				ctx.drawImage(result[0], avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推进去图片
									  
									  ctx.restore(); //恢复之前保存的绘图上下文状态 可以继续绘制
									  ctx.font = 'normal bold 38px sans-serif';
									  ctx.setFillStyle('#222222');
									  ctx.lineWidth=1; 
									  // ctx.fillText(`${self.info.job.recruit_job_title}`, 150, 250);
									  var str = self.info.job.recruit_job_title
									  var lineWidth = 0;
									  // var canvasWidth = c.width;//计算canvas的宽度
									  var initHeight=350;//绘制字体距离canvas顶部初始的高度
									  var lastSubStrIndex= 0; //每次开始截取的字符串的索引
									  for(let i=0;i<str.length;i++){ 
										lineWidth+=ctx.measureText(str[i]).width; 
										if(lineWidth>canvasWidthPx-240){  
											ctx.fillText(str.substring(lastSubStrIndex,i),120,initHeight);//绘制截取部分
											initHeight+=50;//20为字体的高度
											lineWidth=0;
											lastSubStrIndex=i;
										} 
										if(i==str.length-1){//绘制剩余部分
											ctx.fillText(str.substring(lastSubStrIndex,i+1),120,initHeight);
										}
									  }
									  
									  ctx.font = 'normal bold 40px sans-serif';
									  ctx.setFillStyle('#E65449'); // 文字颜色
									  ctx.fillText(`${self.info.job.salary_min}-${self.info.job.salary_max}`, 120, 470); // 绘制文字
									  // console.log(self.info.tag_data[0].tag_name)
									  // return
									  if(self.info.tag_list){
										if(self.info.tag_list.length === 1){
											// 底色
											ctx.setFillStyle('#F5F5F5')
											ctx.fillRect(120, 490, 125, 40)
											
											ctx.font = 'normal normal 24px sans-serif';
											ctx.setFillStyle('#666666'); // 文字颜色
											ctx.fillText(`${self.info.tag_list[0].tag_name}`, 150, 520); // 绘制文字
										}
										
										 if(self.info.tag_list.length === 2){
											// 底色
											ctx.setFillStyle('#F5F5F5')
											ctx.fillRect(120, 490, 125, 40)
											
											ctx.font = 'normal normal 24px sans-serif';
											ctx.setFillStyle('#666666'); // 文字颜色
											ctx.fillText(`${self.info.tag_list[0].tag_name}`, 150, 520); // 绘制文字
											// 底色
											ctx.setFillStyle('#F5F5F5')
											ctx.fillRect(265, 490, 125, 40)
											
											ctx.setFillStyle('#666666'); // 文字颜色
											ctx.fillText(`${self.info.tag_list[1].tag_name}`, 280, 520); // 绘制文字
											
										}
										if( self.info.tag_list.length === 3){
											// 底色
											ctx.setFillStyle('#F5F5F5')
											ctx.fillRect(120, 490, 125, 40)
											
											ctx.font = 'normal normal 24px sans-serif';
											ctx.setFillStyle('#666666'); // 文字颜色
											ctx.fillText(`${self.info.tag_list[0].tag_name}`, 150, 520); // 绘制文字
											// 底色
											ctx.setFillStyle('#F5F5F5')
											ctx.fillRect(265, 490, 125, 40)
											
											ctx.setFillStyle('#666666'); // 文字颜色
											ctx.fillText(`${self.info.tag_list[1].tag_name}`, 280, 520); // 绘制文字
											
											// 底色
											ctx.setFillStyle('#F5F5F5')
											ctx.fillRect(410, 490, 125, 40)
											
											ctx.setFillStyle('#666666'); // 文字颜色
											ctx.fillText(`${self.info.tag_list[2].tag_name}`, 435, 520); // 绘制文字
										}
									  }
									  // ctx.beginPath();
									  // // 设置线宽
									  // ctx.lineWidth = 1;
									  // // 设置间距（参数为无限数组，虚线的样式会随数组循环）
									  // ctx.setLineDash([10, 10]);
									  // // 移动画笔至坐标 x20 y20 的位置
									  // ctx.moveTo(30, 760);
									  // // 绘制到坐标 x20 y100 的位置
									  // ctx.lineTo(660, 760);
									  // // 填充颜色
									  // ctx.strokeStyle = "#aaaaaa";
									  // // 开始填充
									  // ctx.stroke();
									  // ctx.closePath();
									  
									  // ctx.font = 'normal normal 36px sans-serif';
									  // ctx.setFillStyle('#E65449'); // 文字颜色
									  // ctx.fillText('长按识别', 300, 870); // 绘制孩子百分比
									  
									  // ctx.font = 'normal normal 36px sans-serif';
									  // ctx.setFillStyle('#222222'); // 文字颜色
									  // ctx.fillText('小程序码', 444, 870); // 绘制孩子百分比
									  
									  // ctx.font = 'normal blod 30px sans-serif';
									  // ctx.setFillStyle('#222222'); // 文字颜色
									  // ctx.fillText('长按二维码查看职位详情', 175, 660); // 绘制孩子百分比
									  
									  // ctx.drawImage(result[2], coverurl_x, coverurl_y, coverurl_width, coverurl_heigth); // 绘制封面
									  ctx.drawImage(result[0], codeurl_x/2.4, codeurl_y/1.1+200, codeurl_width/1.4, codeurl_heigth/1.4); // 绘制头像
									  ctx.draw(false, function() {
										// canvas画布转成图片并返回图片地址
										wx.canvasToTempFilePath({
											canvasId: 'myCanvas',
											success: function(res) {
												self.canvasToTempFilePath = res.tempFilePath;
												self.showShareImg = true;
												console.log(res.tempFilePath, 'canvasToTempFilePath');
												wx.showToast({
													title: '绘制成功'
												});
											},
											fail: function() {
												wx.showToast({
													title: '绘制失败'
												});
											},
											complete: function() {
												wx.hideLoading();
												wx.hideToast();
											}
										});
									  });
								  }
						})
						
						
						
					});
				}
			},

			// 保存到系统相册
			saveShareImg: function(canvasToTempFilePath) {
				let self = this;
				// 数据埋点点击保存海报
				self.saveId = '保存学情海报';
				// 获取用户是否开启用户授权相册
				if (!self.openStatus) {
					wx.openSetting({
						success: result => {
							if (result) {
								if (result.authSetting['scope.writePhotosAlbum'] === true) {
									self.openStatus = true;
									wx.saveImageToPhotosAlbum({
										filePath: canvasToTempFilePath,
										success() {
											self.showShareImg = false;
											wx.showToast({
												title: '图片保存成功，快去分享到朋友圈吧~',
												icon: 'none',
												duration: 2000
											});
										},
										fail() {
											wx.showToast({
												title: '保存失败',
												icon: 'none'
											});
										}
									});
								}
							}
						},
						fail: () => {},
						complete: () => {}
					});
				} else {
					wx.getSetting({
						success(res) {
							// 如果没有则获取授权
							if (!res.authSetting['scope.writePhotosAlbum']) {
								wx.authorize({
									scope: 'scope.writePhotosAlbum',
									success() {
										self.openStatus = true;
										wx.saveImageToPhotosAlbum({
											filePath: canvasToTempFilePath,
											success() {
												self.showShareImg = false;
												wx.showToast({
													title: '图片保存成功，快去分享到朋友圈吧~',
													icon: 'none',
													duration: 2000
												});
											},
											fail() {
												wx.showToast({
													title: '保存失败',
													icon: 'none'
												});
											}
										});
									},
									fail() {
										// 如果用户拒绝过或没有授权，则再次打开授权窗口
										self.openStatus = false;
										console.log('请设置允许访问相册');
										wx.showToast({
											title: '请设置允许访问相册',
											icon: 'none'
										});
									}
								});
							} else {
								// 有则直接保存
								self.openStatus = true;
								wx.saveImageToPhotosAlbum({
									filePath: canvasToTempFilePath,
									success() {
										self.showShareImg = false;
										wx.showToast({
											title: '图片保存成功，快去分享到朋友圈吧~',
											icon: 'none',
											duration: 2000
										});
									},
									fail() {
										wx.showToast({
											title: '保存失败',
											icon: 'none'
										});
									}
								});
							}
						},
						fail(err) {
							console.log(err);
						}
					});
				}
			}
		}
	};
</script>

<style>
	.login_btn{
		width: 320px;
		height: 50px;
		background: #0AC770;
		border-radius: 25px;
		margin: 0 auto;
		margin-top: 20px;
		text-align: center;
		color: #FFFFFF;
		font-size: 17px;
		line-height: 50px;
	}
</style>
